<template>
  <div class="admin-container">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 菜品管理 -->
      <el-tab-pane label="菜品管理" name="dishes">
        <div class="operation-bar">
          <el-button type="primary" @click="handleAddDish">添加菜品</el-button>
        </div>
        <el-table :data="dishes" style="width: 100%">
          <el-table-column prop="name" label="菜品名称"></el-table-column>
          <el-table-column prop="category" label="分类"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEditDish(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteDish(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 酒水管理 -->
      <el-tab-pane label="酒水管理" name="drinks">
        <div class="operation-bar">
          <el-button type="primary" @click="handleAddDrink">添加酒水</el-button>
        </div>
        <el-table :data="drinks" style="width: 100%">
          <el-table-column prop="name" label="酒水名称"></el-table-column>
          <el-table-column prop="category" label="分类"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="volume" label="容量"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEditDrink(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteDrink(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 订单管理 -->
      <el-tab-pane label="订单管理" name="orders">
        <el-table :data="orders" style="width: 100%">
          <el-table-column prop="id" label="订单编号"></el-table-column>
          <el-table-column prop="date" label="下单时间"></el-table-column>
          <el-table-column prop="total" label="总金额"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleViewOrder(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 推荐管理 -->
      <el-tab-pane label="推荐管理" name="recommend">
        <el-tabs type="border-card">
          <el-tab-pane label="热门菜品" name="hot">
            <div class="operation-bar">
              <el-button type="primary" @click="handleAddRecommend('hotDishes')">添加热门菜品</el-button>
            </div>
            <el-table :data="recommendDishes.hotDishes" style="width: 100%">
              <el-table-column prop="name" label="菜品名称"></el-table-column>
              <el-table-column prop="category" label="分类"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleRemoveRecommend('hotDishes', scope.$index)">
                    移除推荐
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="新品上市" name="new">
            <div class="operation-bar">
              <el-button type="primary" @click="handleAddRecommend('newDishes')">添加新品</el-button>
            </div>
            <el-table :data="recommendDishes.newDishes" style="width: 100%">
              <el-table-column prop="name" label="菜品名称"></el-table-column>
              <el-table-column prop="category" label="分类"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleRemoveRecommend('newDishes', scope.$index)">
                    移除推荐
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="主厨推荐" name="chef">
            <div class="operation-bar">
              <el-button type="primary" @click="handleAddRecommend('chefDishes')">添加主厨推荐</el-button>
            </div>
            <el-table :data="recommendDishes.chefDishes" style="width: 100%">
              <el-table-column prop="name" label="菜品名称"></el-table-column>
              <el-table-column prop="category" label="分类"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleRemoveRecommend('chefDishes', scope.$index)">
                    移除推荐
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <!-- 菜品表单对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDishDialog">
      <el-form :model="dishForm" :rules="dishRules" ref="dishForm" label-width="100px">
        <el-form-item label="菜品名称" prop="name">
          <el-input v-model="dishForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="dishForm.category" placeholder="请选择分类">
            <el-option label="川菜" value="川菜"></el-option>
            <el-option label="粤菜" value="��菜"></el-option>
            <el-option label="湘菜" value="湘菜"></el-option>
            <el-option label="江浙菜" value="江浙菜"></el-option>
            <el-option label="特色小吃" value="特色小吃"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="dishForm.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="dishForm.description"></el-input>
        </el-form-item>
        <el-form-item label="图片链接" prop="image">
          <el-input v-model="dishForm.image"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDishDialog = false">取消</el-button>
        <el-button type="primary" @click="submitDishForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 酒水表单对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDrinkDialog">
      <el-form :model="drinkForm" :rules="drinkRules" ref="drinkForm" label-width="100px">
        <el-form-item label="酒水名称" prop="name">
          <el-input v-model="drinkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="drinkForm.category" placeholder="请选择分类">
            <el-option label="白酒" value="白酒"></el-option>
            <el-option label="红酒" value="红酒"></el-option>
            <el-option label="啤酒" value="啤酒"></el-option>
            <el-option label="饮料" value="饮料"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="drinkForm.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="容量" prop="volume">
          <el-input v-model="drinkForm.volume"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="drinkForm.description"></el-input>
        </el-form-item>
        <el-form-item label="图片链接" prop="image">
          <el-input v-model="drinkForm.image"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDrinkDialog = false">取消</el-button>
        <el-button type="primary" @click="submitDrinkForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="showOrderDialog" width="600px">
      <div v-if="selectedOrder">
        <h4>订单编号: #{{ selectedOrder.id }}</h4>
        <p>下单时间: {{ selectedOrder.date }}</p>
        <el-table :data="selectedOrder.items" size="small">
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
          <el-table-column label="单价" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="小计" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.price * scope.row.quantity }}
            </template>
          </el-table-column>
        </el-table>
        <div class="order-total">
          总计: ¥{{ selectedOrder.total }}
        </div>
      </div>
    </el-dialog>

    <!-- 添加推荐菜品对话框 -->
    <el-dialog title="添加推荐菜品" :visible.sync="showRecommendDialog">
      <el-form :model="recommendForm" ref="recommendForm">
        <el-form-item label="选择菜品" prop="dishId">
          <el-select v-model="recommendForm.dishId" placeholder="请选择菜品" style="width: 100%">
            <el-option
              v-for="dish in availableDishes"
              :key="dish.id"
              :label="dish.name"
              :value="dish.id"
            >
              <span>{{ dish.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{ dish.category }} - ¥{{ dish.price }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showRecommendDialog = false">取消</el-button>
        <el-button type="primary" @click="submitRecommendForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Admin',
  created() {
    // 从 URL 获取 tab 参数
    const tab = this.$route.query.tab
    if (tab && ['dishes', 'drinks', 'orders'].includes(tab)) {
      this.activeTab = tab
    }
  },
  watch: {
    activeTab(newTab) {
      // 更新 URL 参数
      this.$router.push({
        path: '/admin',
        query: { tab: newTab }
      })
    }
  },
  data() {
    return {
      activeTab: 'dishes',
      showDishDialog: false,
      showDrinkDialog: false,
      showOrderDialog: false,
      dialogTitle: '',
      selectedOrder: null,
      dishForm: {
        name: '',
        category: '',
        price: 0,
        description: '',
        image: ''
      },
      drinkForm: {
        name: '',
        category: '',
        price: 0,
        volume: '',
        description: '',
        image: ''
      },
      dishRules: {
        name: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择分类', trigger: 'change' }],
        price: [{ required: true, message: '请输��价格', trigger: 'blur' }]
      },
      drinkRules: {
        name: [{ required: true, message: '请输入酒水名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择分类', trigger: 'change' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        volume: [{ required: true, message: '请输入容量', trigger: 'blur' }]
      },
      showRecommendDialog: false,
      currentRecommendType: '',
      recommendForm: {
        dishId: ''
      }
    }
  },
  computed: {
    dishes() {
      return this.$store.state.dishes
    },
    drinks() {
      return this.$store.state.drinks
    },
    orders() {
      return this.$store.state.orders
    },
    recommendDishes() {
      return this.$store.state.recommendDishes
    },
    availableDishes() {
      // 过滤掉已经在当前推荐类型中的菜品
      const currentRecommended = this.recommendDishes[this.currentRecommendType] || []
      const recommendedIds = currentRecommended.map(dish => dish.id)
      return this.dishes.filter(dish => !recommendedIds.includes(dish.id))
    }
  },
  methods: {
    handleAddDish() {
      this.dialogTitle = '添加菜品'
      this.dishForm = {
        name: '',
        category: '',
        price: 0,
        description: '',
        image: ''
      }
      this.showDishDialog = true
    },
    handleEditDish(dish) {
      this.dialogTitle = '编辑菜品'
      this.dishForm = { ...dish }
      this.showDishDialog = true
    },
    handleDeleteDish(dish) {
      this.$confirm('确认删除该菜品吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$store.commit('deleteDish', dish.id)
        this.$message.success('删除成功')
      })
    },
    submitDishForm() {
      this.$refs.dishForm.validate(valid => {
        if (valid) {
          if (this.dishForm.id) {
            this.$store.commit('updateDish', this.dishForm)
          } else {
            this.$store.commit('addDish', {
              ...this.dishForm,
              id: Date.now()
            })
          }
          this.showDishDialog = false
          this.$message.success('保存成功')
        }
      })
    },
    handleAddDrink() {
      this.dialogTitle = '添加酒水'
      this.drinkForm = {
        name: '',
        category: '',
        price: 0,
        volume: '',
        description: '',
        image: ''
      }
      this.showDrinkDialog = true
    },
    handleEditDrink(drink) {
      this.dialogTitle = '编辑酒水'
      this.drinkForm = { ...drink }
      this.showDrinkDialog = true
    },
    handleDeleteDrink(drink) {
      this.$confirm('确认删除该酒水吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$store.commit('deleteDrink', drink.id)
        this.$message.success('删除成功')
      })
    },
    submitDrinkForm() {
      this.$refs.drinkForm.validate(valid => {
        if (valid) {
          if (this.drinkForm.id) {
            this.$store.commit('updateDrink', this.drinkForm)
          } else {
            this.$store.commit('addDrink', {
              ...this.drinkForm,
              id: Date.now()
            })
          }
          this.showDrinkDialog = false
          this.$message.success('保存成功')
        }
      })
    },
    handleViewOrder(order) {
      this.selectedOrder = order
      this.showOrderDialog = true
    },
    handleAddRecommend(type) {
      this.currentRecommendType = type
      this.recommendForm.dishId = ''
      this.showRecommendDialog = true
    },
    handleRemoveRecommend(type, index) {
      this.$confirm('确认移除该推荐菜品吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$store.commit('removeRecommend', { type, index })
        this.$message.success('移除成功')
      })
    },
    submitRecommendForm() {
      if (!this.recommendForm.dishId) {
        this.$message.warning('请选择菜品')
        return
      }
      const dish = this.dishes.find(d => d.id === this.recommendForm.dishId)
      if (dish) {
        this.$store.commit('addRecommend', {
          type: this.currentRecommendType,
          dish
        })
        this.showRecommendDialog = false
        this.$message.success('添加成功')
      }
    }
  }
}
</script>

<style scoped>
.admin-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.operation-bar {
  margin-bottom: 20px;
}

.order-total {
  margin-top: 20px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}

.el-dialog__body {
  padding: 20px 40px;
}
</style> 